<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>   
    <title>Document</title>
    <style>
      .demo{
        text-align: center;
        line-height: 100px;
        font-size: 50px;
      }
      .list-item {
        display: inline-block;
        margin-right: 10px;
      }
      .list-enter-active, .list-leave-active {
        transition: all 1s;
      }
      .list-enter, .list-leave-to
      /* .list-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
      }
      .flip-list-move {
        transition: transform 1s;
      }
    </style>
</head>
<body>
    <!-- <div id="list-demo" class="demo">
        <ul>
          <li>渲染列表使用transition-group组件</li>
          <li>tag可以更换属性</li>
          <li>内部元素 总是需要 提供唯一的 key 属性值</li>
        </ul>
        <button v-on:click="add">Add</button>
        <button v-on:click="remove">Remove</button>
        <transition-group name="list" tag="p">
          <span v-for="item in items" v-bind:key="item" class="list-item">
            {{ item }}
          </span>
        </transition-group>
    </div> -->

    <div id="flip-list-demo" class="demo">
        <button v-on:click="shuffle">Shuffle</button>
        <transition-group name="flip-list" tag="ul">
          <li v-for="item in items" v-bind:key="item">
            {{ item }}
          </li>
        </transition-group>
      </div>
    
    <script src="index.js">
    </script>
</body>
</html>